<template>
  <n-drawer
    v-model:show="show"
    :width="modalOptions.width"
    :height="modalOptions.height"
    :placement="modalOptions.placement"
  >
    <n-drawer-content :title="modalOptions.title" :closable="modalOptions.closable">
      <slot />
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
const props = defineProps({
  width: {
    type: String,
    default: '500px',
  },
  height: {
    type: String || Number,
    default: undefined,
  },
  title: {
    type: String,
    default: '',
  },
  closable: {
    type: Boolean,
    default: true,
  },
  placement: {
    type: String,
    default: 'right',
  },
})
// 声明一个show变量，用于控制模态框的显示与隐藏
const show = ref(false)
// 声明一个modalOptions变量，用于存储模态框的配置信息
const modalOptions = ref({})

// 打开模态框
async function open(options = {}) {
  // 将props和options合并赋值给modalOptions
  modalOptions.value = { ...props, ...options }
  // 将show的值设置为true
  show.value = true
}

// 定义一个close函数，用于关闭模态框
function close() {
  show.value = false
}

// 定义一个defineExpose函数，用于暴露open、close、handleOk、handleCancel函数
defineExpose({
  open,
  close,
  options: modalOptions,
})
</script>

<style scoped lang="scss"></style>
